<template>
	<view class="bg-white">
		<view class="w-670">
			<view class="text-cut">
				<button class="bg-blue cu-btn fs-24">基金</button>
				<text class="fs-32 text-bold margin-left ">{{fdd.name}}</text>
				<text class="fs-32 text-bold pl-10">({{fdd.code}})</text>
			</view>
			<view class="margin-top section">
				<button type="default" class="cu-btn bg-blue light">中风险</button>
				<button type="default" class="cu-btn text-blue s-r margin-left">
					{{fdd.type}}
				</button>
			</view>

			<view class="flex justify-between">
				<view>
					<!--———————————————债务基金进入界面——————————————————— -->
					<view class=" color-b fs-24 margin-top" v-if="fdd.dayGrowth">
						<view class="basis-df fs-52 text-bold padding-top-sm"
							:class="[fdd.dayGrowth<0?'text-green':'text-red cuIcon-add']">{{fdd.dayGrowth}}%</view>
						<view class="basis-df">日涨跌幅</view>
					</view>
					<!--———————————————债务基金进入界面——————————————————— -->

					<!--———————————————货币基金进入界面——————————————————— -->
					<view class=" color-b fs-24 margin-top" v-else>
						<view class="basis-df">七日年化率</view>
						<view class="basis-df fs-52 text-bold padding-top-sm"
							:class="[fdd.dayGrowth<0?'text-green':'text-red cuIcon-add']">{{fdd.sevenDaysYearIncome}}%
						</view>
					</view>
					<!--———————————————货币基金进入界面——————————————————— -->
				</view>

				<view>
					<!--———————————————债务基金进入界面——————————————————— -->
					<view class="color-b  margin-top " v-if="fdd.netWorthDate">
						<view class="basis-df text-black fs-52 text-bold padding-top-sm">{{fdd.netWorth}}</view>
						<view class="basis-df fs-24">最新净值（{{fdd.netWorthDate.substring(5)}}）</view>
					</view>
					<!--———————————————债务基金进入界面——————————————————— -->

					<!--———————————————货币基金进入界面——————————————————— -->
					<view class="color-b  margin-top " v-else>
						<view class="basis-df fs-24">万份收益（{{fdd.millionCopiesIncomeDate}}）</view>
						<view class="basis-df text-black fs-52 text-bold padding-top-sm">{{fdd.millionCopiesIncome}}
						</view>
					</view>
					<!--———————————————货币基金进入界面——————————————————— -->
				</view>
			</view>

			<view class="margin-top mid"></view>

			<!-- ——————————————————————导航—————————————————— -->
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item color-9 fs-32" :class="[curIndex == index ? 'active' : '']"
					v-for="(i, index) in navData" :key="i" @tap="change(index)">
					{{ i }}
				</view>
			</scroll-view>

			<!-- ——————————————————————导航—————————————————— -->
			<swiper @change="changeTab" :current="curIndex" style="height: calc(100vh - 70rpx)">
				<!-- 业绩 -->
				<swiper-item>
					<scroll-view scroll-y="true" style="height:100%">
						<view class="swiper-item margin-top">
							<view class="flex justify-between btnNav">
								<button class="cu-btn" :class="[
                    btnIndex == index ? 'bg-blue light' : '',
                    btnIndex == index ? '' : 'btn-ite',
                  ]" v-for="(i, index) in btnNav" :key="index" @tap="btnChange(index)">
									{{ i }}
								</button>
							</view>

							<!-- ————————————————————收益走势 ————————————————-->
							<view class="margin-top">
								<!-- 货币基金进来不显示 -->
								<view v-if="!fdd.millionCopiesIncome">
									<view>
										<view class="flex justify-between">
											<view class="basis-df">
												<view class="fs-24 cuIcon-title text-blue">
													<text class="text-black">本产品：</text>
													<text class="text-red fs-32"
														:class="[fgd.series[0].data[0]<0?'text-green':'text-red']">{{fgd.series[0].data[0]}}%</text>
												</view>
											</view>
											<view class="basis-df">
												<view class="fs-24 cuIcon-title text-black">
													<text class="text-black">沪深300：</text>
													<text class="text-red fs-32"
														:class="[fgd.series[0].data[1]<0?'text-green':'text-red']">{{fgd.series[0].data[1]}}%</text>
												</view>
											</view>
										</view>
									</view>
									<!-- 折线图 -->
									<view class="content margin-top">
										<view class="charts-box">
											<qiun-data-charts type="line" :chartData="fgd" :echartsH5="true"
												:echartsApp="true" background="none" :animation="false"
												:ontouch="true" />
										</view>

									</view>
									<view class="flex text-center padding-top">
										<view class="flex-sub fs-24 p-34" :class="index == TabCur ? 'bg-blue' : ''"
											v-for="(i, index) in time" :key="i" @tap="tabSelect" :data-id="index">
											{{ i }}
										</view>
									</view>
								</view>
								<view class=" text-center text-bold fs-32 text-blue padding" v-else>哎呀！暂无该基金数据，客官可以看看其他
								</view>

								<view v-show="btnIndex == 0">
									<view class="flex margin-top">
										<view class="flex-sub text-bold fs-32">阶段业绩</view>
										<view class="flex-sub text-right">
											<text>更多业绩</text>
											<text class="cuIcon-right"></text>
										</view>
									</view>

									<!-- ——————————————阶段业绩—————————————— -->
									<view class="stage">
										<view class="flex margin-top">
											<view class="flex-sub fs-32" v-for="s in stage.nav" :key="s">{{ s }}</view>
										</view>

										<view class="flex pt-16" v-for="l in stage.list" :key="l.week">
											<view class="flex-sub fs-24">{{ l.week }}</view>
											<view class="flex-sub fs-32 text-red">{{ l.product }}%</view>
											<view class="flex-sub fs-32 text-green">-{{ l.hu }}%</view>
											<view class="flex-sub fs-32">
												<text class="text-black">{{ l.top }}/</text>
												<text class="text-grey">{{ l.order }}</text>
											</view>
										</view>
									</view>

									<view class="flex" style="margin-top: 72rpx">
										<view class="flex-sub text-bold fs-32">年度业绩</view>
										<view class="flex-sub text-right">
											<text>更多业绩</text>
											<text class="cuIcon-right"></text>
										</view>
									</view>
									<!-- ——————————————阶段业绩—————————————— -->

									<!-- ——————————————年度业绩—————————————— -->
									<view class="year">
										<view class="flex margin-top">
											<view class="flex-sub fs-32" v-for="y in year.nav" :key="y">{{ y }}</view>
										</view>

										<view class="flex pt-16" v-for="l in year.list" :key="l.time">
											<view class="flex-sub fs-32 text-red">{{ l.time }}</view>
											<view class="flex-sub fs-32 text-red">+{{ l.hui }}%</view>
											<view class="flex-sub fs-32 text-green">-{{ l.avg }}%</view>
										</view>
									</view>
								</view>
								<!-- ——————————————年度业绩—————————————— -->

								<!-- ——————————————历史净值—————————————— -->
								<view class="stage" v-show="btnIndex == 2">
									<view class="flex margin-top text-center">
										<view class="flex-sub fs-32" v-for="s in history.nav" :key="s">{{ s }}</view>
									</view>

									<view class="flex pt-16 justify-between align-center text-center"
										v-for="l in history.list" :key="l.date">
										<view class="flex-sub fs-24">{{ l.date }}</view>
										<view class="flex-sub fs-32 text-red">{{ l.product }}</view>
										<view class="flex-sub fs-32 text-green">{{ l.hu }}</view>
										<view class="flex-sub fs-32" :class="[l.order > 0 ? 'text-red' : 'text-gray']">
											{{ l.order }}%
										</view>
									</view>
								</view>

								<!-- ——————————————历史净值—————————————— -->

								<view class="text-bold fs-32 margin-top">特色数据</view>
								<view class="flex text-center margin-top">
									<view class="flex-sub">
										<view class="text-bold fs-32">+26.33%</view>
										<view class="text-bold fs-24 text-gray ">近一年波动率%</view>
									</view>
									<view class="flex-sub">
										<view class="text-bold fs-32">+4.23%</view>
										<view class="text-bold fs-24 text-gray ">近一年夏普比率%</view>
									</view>
									<view class="flex-sub">
										<view class="text-bold fs-32">-26.33%</view>
										<view class="text-bold fs-24 text-gray ">近一年最大回撤率%</view>
									</view>
								</view>

								<view class="flex margin-top">
									<view class="flex-sub text-bold fs-32">分红</view>
									<view class="flex-sub text-right">
										<text>更多分红</text>
										<text class="cuIcon-right"></text>
									</view>
								</view>

								<view class="flex mt-20">
									<view class="flex-sub text-bold fs-32">
										<view class="">权益登记日</view>
										<view class="text-red mt-20">2021-05-23</view>
									</view>
									<view class="flex-sub text-bold fs-32">
										<view class="">红利发放日</view>
										<view class="text-red mt-20">2020-09-05</view>
									</view>
									<view class="flex-sub text-bold fs-32">
										<view class="">每份分红(元)</view>
										<view class="text-red mt-20">0.0400</view>
									</view>
								</view>

								<view class="footer">过往业绩不预示未来表现,市场有风险,投资需谨慎</view>

								<view class="padding flex">
									<button @tap="aip()" class="flex-sub cu-btn margin-tb-sm lg bg-white">
										定投
									</button>

									<button @tap="buy()" class="flex-sub cu-btn margin-tb-sm lg bg-1f">
										买入
									</button>
								</view>
								 
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 概况 -->
				<swiper-item>
					<view class="swiper-item">
						<view class="flex margin-top">
							<view class="flex-sub text-bold fs-32">基金经理</view>
							<view class="flex-sub text-right">
								<text>历任基金经理</text>
								<text class="cuIcon-right"></text>
							</view>
						</view>

						<view class="cu-list menu-avatar margin-top">
							<view class="cu-item">
								<view class="cu-avatar round lg" style="
                    background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi5.hexun.com%2F2019-10-02%2F198751279.jpg&refer=http%3A%2F%2Fi5.hexun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622433300&t=ed468830663db91be8e1f97e7281270c);
                  ">
								</view>
								<view class="content">
									<view class="">
										<text class="text-bold fs-28">{{fdd.manager}}</text>
										<text class="padding-left text-bold fs-24">现任2019-10-15至今</text>
									</view>
									<view class="fs-24">

										<view class="">
											<text class="text-gray">擅长领域</text>
											<text class="text-bold padding-left">{{fdd.type}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>

						<view class="">
							<view class="text-bold fs-32 padding-top">基金介绍</view>
							<view class="flex justify-between padding-top-lg">
								<view class="basis-sm fs-28 text-bold">基金全称</view>
								<view class="basis-xl fs-24 text-right">{{fdd.name}}</view>
							</view>
							<view class="flex justify-between padding-top-lg">
								<view class="basis-df fs-28 text-bold">基金代码</view>
								<view class="basis-df fs-24 text-right">{{fdd.code}}</view>
							</view>
							<view class="flex justify-between padding-top-lg">
								<view class="basis-df fs-28 text-bold">成立日期</view>
								<view class="basis-df fs-24 text-right">2019-10-15</view>
							</view>
							<view class="flex justify-between padding-top-lg">
								<view class="basis-df fs-28 text-bold">资产规模</view>
								<view class="basis-df fs-24 text-right">{{fdd.fundScale}}元.
								</view>
							</view>
							<view class="flex justify-between padding-top-lg">
								<view class="basis-df fs-28 text-bold">基金管理人</view>
								<view class="basis-df fs-24 text-right">招商银行</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<!-- 持仓 -->
				<swiper-item>
					<scroll-view scroll-y="true" style="height: 100%;">
						<view>

							<view class="swiper-item" v-if="fpd.length">
								<view class="bg-gray padding text-center fs-28 margin-top">
									<text class="cuIcon-back padding-right"></text>
									<text>{{fpd[0]}}</text>
									<text class="cuIcon-right padding-left"></text>
								</view>

								<!-- 图表 -->
								<view class="charts-box margin-top">
									<qiun-data-charts type="pie" :chartData="fpd[fpd.length-1]" background="none"
										:animation="false" />
								</view>

								<!-- 列表 -->
								<view class="title fs-32 text-bold">重仓债</view>
								<view class="flex justify-between padding-top ">
									<view class="flex-sub">重仓债</view>
									<view class="flex-sub text-center">市值</view>
									<view class="flex-sub text-right">持仓比</view>
								</view>
								<view class="flex justify-between fs-28 align-center  padding-top-sm"
									v-for="i in fpd[1]" :key="i[0]">
									<view class="flex-sub">
										<text>{{i[1]}}</text>
										<text class="fs-24">\n{{i[0]}}</text>
									</view>
									<view class="flex-sub text-right">{{i[i.length-1]}}万云</view>
									<view class="flex-sub text-right">{{i[2]}}</view>
								</view>

							</view>
							<view class=" text-center text-bold fs-32 text-blue padding margin-top-lg" v-else>
								哎呀！暂无该基金数据，客官可以看看其他
							</view>
						</view>
					</scroll-view>


				</swiper-item>
				<!-- 费率 -->
				<swiper-item>
					<view class="swiper-item">
						<view class="margin-top">
							<button class="cu-btn bg-blue">买入</button>
							<button class="cu-btn bg-orange margin-left">赎回</button>
						</view>
						<view class="">
							<view class="flex justify-between padding-top-lg">
								<view class="basis-df fs-28 text-bold">买入状态</view>
								<view class="basis-df fs-24 text-right">开放申购</view>
							</view>
							<view class="flex justify-between padding-top-lg">
								<view class="basis-df fs-28 text-bold">定投状态</view>
								<view class="basis-df fs-24 text-right">可定投</view>
							</view>
							<view class="flex justify-between padding-top-lg">
								<view class="basis-df fs-28 text-bold">起投金额</view>
								<view class="basis-df fs-24 text-right">1.00元</view>
							</view>
							<view class="flex justify-between padding-top-lg">
								<view class="basis-df fs-28 text-bold">定投金额</view>
								<view class="basis-df fs-24 text-right">100.00元</view>
							</view>
							<view class="flex justify-between padding-top-lg">
								<view class="basis-df fs-28 text-bold">日累计金额</view>
								<view class="basis-df fs-24 text-right">1000.00万元</view>
							</view>
						</view>

						<view class="margin-top">
							<text class="fs-32 text-bold">买入流程</text>
							<view class="bg-white">
								<view class="cu-steps">
									<view class="cu-item" :class="index > num ? '' : 'text-blue'"
										v-for="(i, index) in basicsList" :key="i">
										<text class="num" :class="index == 2 ? 'err' : ''"
											:data-index="index + 1"></text>
										{{ i.name }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<!-- 公告 -->
				<swiper-item>
					<view class="swiper-item">
						<view class="margin-top flex justify-between">
							<button class="cu-btn bg-blue">全部</button>
							<button class="cu-btn bg-orange">发行运作</button>
							<button class="cu-btn bg-olive">定期报告</button>
							<button class="cu-btn bg-cyan">分红配送</button>
						</view>
						<view class="margin-top">
							<view class="padding-top">
								<view class="fs-28 text-bold">财通资管洪福短债债券型证券投资基金托管协议</view>
								<view class="fs-24 text-gray">2021-04-20</view>
							</view>
							<view class="padding-top">
								<view class="fs-28 text-bold">财通资管洪福短债债券型证券投资基金托管协议</view>
								<view class="fs-24 text-gray">2021-04-20</view>
							</view>
							<view class="padding-top">
								<view class="fs-28 text-bold">财通资管洪福短债债券型证券投资基金托管协议</view>
								<view class="fs-24 text-gray">2021-04-20</view>
							</view>
							<view class="padding-top">
								<view class="fs-28 text-bold">财通资管洪福短债债券型证券投资基金托管协议</view>
								<view class="fs-24 text-gray">2021-04-20</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers('product')
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				navData: ["业绩", "概况", "持仓", "费率", "公告"],
				curIndex: 0, //控制btn的切换非常重要
				btnNav: ["收益走势", "实时估算", "单位净值"], //btn导航
				btnIndex: 0, //，默认第一个btn
				options: {},
				code1: "",
				basicsList: [{
						cuIcon: "usefullfill",
						name: "买入",
					},
					{
						cuIcon: "radioboxfill",
						name: "确认份额",
					},
					{
						cuIcon: "roundclosefill",
						name: "查看盈亏",
					},
				],
				basics: 0,

				// 这个数据是暂时 可以删除
				chartsDataLine1: {
					categories: ["2014", "2015", "2016", "2017", "2020", "2021"],
					series: [{
							name: "成交量A",
							data: [-5, -8, 0, 2, 4, 8],
						},
						{
							name: "成交量B",
							data: [-1, -3, 0, 5, 4, 10],
						},

					],
				},

				/* 时间导航 */
				time: ["近1月", "近3月", "近6月", "近1年", "近3年"],

				/* 阶段业绩 */
				stage: {
					nav: ["日期", "本产品", "沪深300", "同类排名"],
					list: [{
							week: "近一周",
							product: 7.56,
							hu: 3.68,
							top: 6,
							order: 5785,
						},
						{
							week: "近一月",
							product: 2.56,
							hu: 4.68,
							top: 6,
							order: 7785,
						},
						{
							week: "近一年",
							product: 4.54,
							hu: 2.28,
							top: 5,
							order: 5785,
						},
					],
				},
				/* 历史业绩 */
				history: {
					nav: ["日期", "单位净值", "单位净值", "日增涨幅"],
					list: [{
							date: "2021-4-20",
							product: 7.56,
							hu: 3.68,
							order: 0.63,
						},
						{
							date: "2021-4-21",
							product: 7.56,
							hu: 3.68,
							order: -1.63,
						},

						{
							date: "2021-4-22",
							product: 7.56,
							hu: 3.68,
							order: 0.0,
						},
					],
				},

				/* 年度业绩 */
				year: {
					nav: ["年度", "回报率(%)", "同类平均(%)"],
					list: [{
							time: "2020",
							hui: 7.56,
							avg: 3.68,
						},
						{
							time: "2019",
							hui: 2.06,
							avg: 1.68,
						},
						{
							time: "2018",
							hui: 5.56,
							avg: 4.68,
						},
					],
				},
			};
		},
		computed: {
			...mapState(['fdd', 'fpd', 'fgd']),

		},
		methods: {
			...mapActions(['getFundDet', 'getFundGraph', 'getFundPt']),
			...mapMutations(['clearFgd']),

			clearData() {
				if (fdd.name.indexOf('货币')) {
					this.clearFgd()
				}
			},

			// 下面四个函数都是为了控制页面切换
			btnChange(i) {
				this.btnIndex = i;
			},


			change(index) {
				this.curIndex = index;
			},

			changeTab(e) {
				this.curIndex = e.detail.current;

			},

			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.getFundGraph([this.options, this.TabCur])
			},
			// 上面四个函数都是为了控制页面切换


			// 跳转基金定投
			aip() {
				uni.navigateTo({
					url: "../t-fundAip/t-fundAip"
				});
			},

			// 基金购买跳转传过去4个值{基金代码、基金名称、原始买入费率、现在买入费率，最低买入份额 }，
			buy() {
				uni.navigateTo({
					url: "../t-fundBuy/t-fundBuy?current=fund&product=" + this.code1 + "&fixedDay=0&name=" + this
						.fdd.name + "&rateOfReturn=" + this.fdd.buySourceRate + "&netWorth=" + this.fdd.buyRate +
						"&startmoney=100"
				});
			},
		},

		onLoad(options) {
			this.options = options;
			this.getData(); //获取所有基金数据
			this.getFundDet(options) //获取基金详情数据
			this.getFundGraph([options, this.TabCur]) //获取折线图数据
			this.getFundPt(options) //获取持仓出生
			this.code1 = options.code //保存code


		},



	};
</script>

<style lang="scss" scoped>
	.w-670 {
		width: 670rpx;
		margin: 0 auto;
	}

	.w-750 {
		width: 750rpx;
	}

	.fs-32 {
		font-size: 32rpx;
	}

	.fs-24 {
		font-size: 24rpx;
	}

	.fs-52 {
		font-size: 52rpx;
	}

	.color-b {
		color: #bbbbbb;
	}

	.color-9 {
		color: #999999;
	}

	.bg-1f {
		background: #1f6cc0;
		color: white;
	}

	.p-34 {
		padding: 14rpx 15rpx;
	}

	.pt-16 {
		padding-top: 16rpx;
	}

	.pl-10 {
		padding-left: 10rpx;
	}


	.section {
		.s-r {
			border: 2px solid #bbd8ff;
			color: #007aff;
			background-color: white;
		}
	}

	.mid {
		width: 750rpx;
		height: 24rpx;
		color: #f8f7f7;
	}

	.active {
		color: #323232;
		font-weight: bold;
		border-bottom: 2px solid #323232;
	}

	.btnNav {

		&::after {
			content: "";
			width: 100rpx;
		}

		.btn-item {
			color: #727272;
			background: #e0e0e0;
			font-size: 24rpx;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.charts-box {
		width: 100%;
		height: 400rpx;

	}

	.mt-16 {
		margin-top: 16rpx;
	}

	.mt-20 {
		margin-top: 20rpx;
		overflow: hidden;
	}

	.footer {

		font-size: 20rpx;
		font-weight: 300;
		margin-top: 50rpx;
		overflow: hidden;
		color: #c0c0c0;
	}
</style>
